<template>
  <div class="sort">
    <div v-for="(itm,index) in cities" :key="itm.index" ref="index">
      <div class="sort-head">{{index}}</div>
      <ul class="sort-list clearFix">
        <li v-for="itme in itm" :key="itme.id">{{itme.name}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{

    }
    },
    props:["cities","index"],
    methods:{
      cheng(){
        let a = this.$refs.index;
        scrollToElement(a, 1500)
      }
    }
  }

</script>
<style scoped>
  .sort-head{
    font-size: .12rem;
    line-height: .36rem;
    margin-left: .15rem;
  }
  .sort-list{
    background: #fff;
  }
  .sort-list li{
    width:25%;
    line-height: .45rem;
    text-align: center;
    float:left;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: .14rem;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-list li:nth-child(4n){
    border-right: none;
  }
</style>
